<template>
	<view class="real-name_wrapper">
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/shouji.svg"></image> -->
				<text>真实姓名</text>
			</view>
			<input type="text" v-model="realName" placeholder="请输入真实姓名" />
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/information.svg"></image> -->
				<text>身份证号</text>
			</view>
			<input type="text" v-model="idCard" placeholder="请输入身份证号" />
		</view>
		<view class="form_item">
			<view class="item_title">
				<!-- <image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/information.svg"></image> -->
				<text>身份证照片</text>
			</view>
			<view class="item_pic">
				<image :src="idPhotoPositive.picUrl" @click="uploadIdCard('positive')"></image>
				<text>点击上传身份证正面照</text>
				<image :src="idPhotoNegative.picUrl" @click="uploadIdCard('negative')"></image>
				<text>点击上传身份证背面照</text>
			</view>
		</view>
		<button type="primary" class="login__btn" @click="bindRealName">完成认证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realName: '',  	// 真实姓名
				idCard: '',		// 身份证号
				idPhotoPositive:{
					picUrl:'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/idPhotoPositive.svg',
					mark: 0
				},  // 身份证正面
				idPhotoNegative:{
					picUrl:'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/idPhotoNegative.svg',
					mark: 0
				}	// 身份证背面
			};
		},
		methods:{
			// 上传头像
			uploadIdCard(arg){
				let that = this;
				uni.chooseImage({
					count:1,
					success(res) {
						uni.showLoading({
							title:'上传中...'
						})
						uni.uploadFile({
							url:that.$api.getApiUrl()+'/upload', //上传接口
							filePath: res.tempFilePaths[0],
							name: 'file', 
							formData: {
								'img': res.tempFilePaths[0]
							},
							header: {
								'content-type': 'multipart/form-data',
								'AUTHORIZATION': uni.getStorageSync('user_token')
							},
							success: (uploadFileRes) => {
								uni.hideLoading()
								if(arg === 'positive'){
									that.idPhotoPositive.picUrl = JSON.parse(uploadFileRes.data).message
									that.idPhotoPositive.mark = 1
								}else{
									that.idPhotoNegative.picUrl = JSON.parse(uploadFileRes.data).message
									that.idPhotoNegative.mark = 1
								}
							}
						});
					}
				})
			},
			// 监听完成认证按钮
			bindRealName(){
				if(this.realName === ''){
					uni.showToast({
						title: '姓名不能为空',
						icon:'none'
					})
					return
				}
				if(this.idCard === ''){
					uni.showToast({
						title: '身份证号不能为空',
						icon:'none'
					})
					return
				}
				if(this.idPhotoPositive.mark === 0){
					uni.showToast({
						title: '请上传正面照片',
						icon:'none'
					})
					return
				}
				if(this.idPhotoNegative.mark === 0){
					uni.showToast({
						title: '请上传背面照片',
						icon:'none'
					})
					return
				}
				this.$api.bindRealName({
					user_name: this.realName,
					id_card: this.idCard,
					front_img: this.idPhotoPositive.picUrl,
					back_img: this.idPhotoNegative.picUrl
				},res=>{
					console.log(res)
					uni.showToast({
						title: res.data.message,
						icon:'none'
					})
					if(res.data.type==='ok'){
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							})
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.real-name_wrapper{
		height:100%;
		background-color: #ffffff;
		overflow: auto;
	}
	.form_item {
		position: relative;
		margin-top: 40upx;

		.item_title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 50upx;
			// image {
			// 	width: 40upx;
			// 	height: 40upx;
			// 	margin: 0 20upx 0 40upx;
			// }
			text{
				font-size: 14px;
				margin: 0 20upx 0 40upx;
			}
		}
		.item_pic{
			width: 70%;
			margin: 0 auto;
			text-align: center;
			image{
				width:100%;
				height: 400upx;
				margin-top: 40upx;
			}
			text{
				color: #999999;
			}
		}

		input {
			position: relative;
			display: block;
			width: 90%;
			height: 80upx;
			line-height: 80upx;
			margin-left: 40upx;
		}

		input:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			-webkit-transform: scaleY(.5);
			-webkit-transform-origin: 0 0;
		}

		.verify_btn {
			position: absolute;
			top: 60upx;
			right: 40upx;
			z-index: 999;
			border-radius: 50upx;
			background-color: #E03E4D;
		}
	}
	.login__btn {
		width: 90%;
		margin: 63upx auto;
		background-color: #E03E4D;
		border-radius: 50upx;
	}
</style>
